<template>
  <base-panel>
    <template #header>
        <h3>24小时平均降雨量预报</h3>
    </template>
    
    <div class="rainfall-list">
      <div class="rainfall-item" v-for="(item, index) in rainfallData" :key="index">
        <span class="station">{{ item.station }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>
  </base-panel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel.vue'

// 模拟数据
const rainfallData = [
  { station: '区域1', value: '9.4' },
  { station: '防汛平台', value: '9.8' },
  { station: '区域2', value: '11.1' },
  { station: '区域3', value: '14.7' },
  { station: '大坝区域', value: '15.1' },
  { station: '小浪底', value: '12.4' }
]
</script>

<style lang="scss" scoped>
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
  }
}

.rainfall-list {
  .rainfall-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .station {
      color: rgba(255, 255, 255, 0.7);
    }

    .value {
      color: #00ffff;
      font-family: DINPro;
    }
  }
}
</style> 